import './dlg-font.css';

export class FontDialog extends HTMLElement{
  constructor() {
    super();
   
    this.#init();
    this.#$btnClose.onclick = this.#onClose.bind(this);
    this.#$btnOk.onclick = this.#onStorage.bind(this);
    this.#$btnCancle.onclick = this.#onClose.bind(this);
    this.#$titlebar.onmousedown = (e) => {
        this.#isDragging = true;
        this.#startX = e.pageX;
        this.#startY = e.pageY;
        this.#dlgX = this.#$dlg.offsetLeft;
        this.#dlgY = this.#$dlg.offsetTop;
        console.log(this.#dlgX, this.#dlgY)
    };
    document.body.addEventListener('mousemove', (e) => {
        if (!this.#isDragging) return;

        const offsetX = e.pageX - this.#startX;
        const offsetY = e.pageY - this.#startY;

        this.#$dlg.style.left = (this.#dlgX + offsetX - 534) + 'px';
        this.#$dlg.style.top = (this.#dlgY + offsetY) + 'px';

     });
     document.body.addEventListener('mouseup', (e) => {
                this.#isDragging = false;
            
      });


  }
  #init() {
    this.innerHTML = this.#html;
    this.$ = this.querySelector;

    this.#$btnClose = this.$('.close-btn');
    this.#$titlebar = this.$('.notepad-dlg-titlebar');
    this.#$dlg = this.$('.notepad-dlgbox');
    this.#$btnOk = this.$('.btn-ok')
    this.#$btnCancle = this.$('.btn-cancel');
    this.#$fontFamilyEdi = document.body.querySelectorAll('.editor')[0];
    this.#$fontStyleEdi = document.body.querySelectorAll('.editor')[1];
    this.#$fontSizeEdi = document.body.querySelectorAll('.editor')[2];
    this.#$sampleText = this.$('.sample-txt');
    this.#$editorArea = this.$('.ediText');
    this.#$editorArea = document.body.querySelector('.ediText');

    this.#fontFamilyItem = document.body.querySelectorAll('.font-family-list .item');
    this.#fontStyleItem = document.body.querySelectorAll('.font-style-list .item');
    this.#fontSizeItem = document.body.querySelectorAll('.font-size-list .item');


    this.#$fontFamilyEdi.setAttribute('value', 'Arial');
    this.#$fontStyleEdi.setAttribute('value', '常规');
    this.#$fontSizeEdi.setAttribute('value', 16);
    this.#$fontSizeEdi.select();

    this.#changeFontFamilyItem()
    this.#changeFontStyleItem()
    this.#changeFontSizeItem()
    this.#restore();
}
  #changeFontFamilyItem() {
    let fontFamilyItem = this.#fontFamilyItem;
    for (let i = 0; i < fontFamilyItem.length; i++) {
        fontFamilyItem[i].onclick = () => {
            for (let j = 0; j < fontFamilyItem.length; j++) {
                fontFamilyItem[j].setAttribute('class', 'item')
            }
            fontFamilyItem[i].setAttribute('class', 'item selected')
            this.#$fontFamilyEdi.setAttribute('value', fontFamilyItem[i].innerText);
            this.#$fontFamilyEdi.select();
            this.#$sampleText.style['font-family'] = fontFamilyItem[i].innerText;
        }
    }
}
  #changeFontStyleItem() {
    let fontStyleItem = this.#fontStyleItem;
    for (let i = 0; i < fontStyleItem.length; i++) {
        fontStyleItem[i].onclick = () => {
            for (let j = 0; j < fontStyleItem.length; j++) {
                fontStyleItem[j].setAttribute('class', 'item')
            }
            fontStyleItem[i].setAttribute('class', 'item selected')
            this.#$fontStyleEdi.setAttribute('value', fontStyleItem[i].innerText);
            this.#$fontStyleEdi.select();
            switch (i) {
                case 0:
                    this.#$sampleText.style['font-style'] = 'normal';
                    this.#$sampleText.style['font-weight'] = 'normal';
                    break;
                case 1:
                    this.#$sampleText.style['font-style'] = 'italic';
                    this.#$sampleText.style['font-weight'] = 'normal';
                    break;
                case 2:
                    this.#$sampleText.style['font-style'] = 'normal';
                    this.#$sampleText.style['font-weight'] = 'bold';
                    break;
                case 3:
                    this.#$sampleText.style['font-style'] = 'italic';
                    this.#$sampleText.style['font-weight'] = 'bold';
                default:
                    break;
            }
        }
    }
}
  #changeFontSizeItem() {
    let fontSizeItem = this.#fontSizeItem;
    for (let i = 0; i < fontSizeItem.length; i++) {
        fontSizeItem[i].onclick = () => {
            for (let j = 0; j < fontSizeItem.length; j++) {
                fontSizeItem[j].setAttribute('class', 'item')
            }
            fontSizeItem[i].setAttribute('class', 'item selected')
            this.#$fontSizeEdi.setAttribute('value', fontSizeItem[i].innerText);
            this.#$fontSizeEdi.select();
            this.#$sampleText.style['font-size'] = fontSizeItem[i].innerText + 'pt'
        }
    }
  }
  #onClose() {
    localStorage['font-dialog-top'] = this.#$dlg.offsetTop;
    localStorage['font-dialog-left'] = this.#$dlg.offsetLeft - 534;
    this.remove();
}
  #restore() {
    this.#$dlg.style.top = (localStorage['font-dialog-top'] || 100) + 'px';
    this.#$dlg.style.left = (localStorage['font-dialog-left'] || 100) + 'px';
}
  #onStorage(){
    localStorage['font-family']=this.#$sampleText.style['font-family']
    localStorage['font-size']=this.#$sampleText.style['font-size']
    localStorage['font-weight']=this.#$sampleText.style['font-weight']
    localStorage['font-style']=this.#$sampleText.style['font-style'];
    let editorArea = this.#$editorArea;
    this.#$editorArea.style['font-family'] = this.#$sampleText.style['font-family']
    this.#$editorArea.style['font-style'] = this.#$sampleText.style['font-style']
    this.#$editorArea.style['font-weight'] = this.#$sampleText.style['font-weight'];
    this.#$editorArea.style['font-size'] = this.#$sampleText.style['font-size']

    this.remove();
  }
  #$btnClose = null;
  #$titlebar = null;
  #$btnOk = null;
  #$btnCancle = null;
  #$sampleText = null;
  #$fontFamily = null;
  #$fontStyle = null;
  #$fontSize = null;
  #$fontFamilyEdi = null;
  #$fontStyleEdi = null;
  #$fontSizeEdi = null;
  #$dlg = null;
  #$editorArea = null;
  #isDragging = false;
  #startX = 0;
  #startY = 0;
  #dlgX = 0;
  #dlgY = 0;

  #fontFamilyItem = [];
  #fontStyleItem = [];
  #fontSizeItem = [];
  #html =''
      + '<div class="notepad-dlg-mask notepad-dlg-font">'
  + '<div class="dialogbox notepad-dlgbox ui-draggable">'
  + '<div class="notepad-dlg-titlebar ui-draggable-handle">'
    + '<p class="title">字体</p>'
    + '<span class="close-btn" title="关闭">✖</span>'
  + '</div>'
  + '<div class="main notepad-dlg-main">'
  + '<div class="font-family"><p>字体(F):</p><div class="notepad-com-list" style="width: 176px;">'
  + '<input class="editor" type="text"><br>'
  + '<ul class="list font-family-list">'
  + '<li class="item" style="font-family: &quot;Agency FB&quot;;">Agency FB</li>'
  + '<li class="item" style="font-family: Algerian;">Algerian</li>'
  + '<li class="item selected" style="font-family: Arial;">Arial</li>'
  + '<li class="item" style="font-family: &quot;Arial Rounded MT&quot;;">Arial Rounded MT</li>'
  + '<li class="item" style="font-family: &quot;Axure Handwriting&quot;;">Axure Handwriting</li>'
  + '<li class="item" style="font-family: Bahnschrift;">Bahnschrift</li>'
  + '<li class="item" style="font-family: &quot;Baskerville Old Face&quot;;">Baskerville Old Face</li>'
  + '<li class="item">Bauhaus 93</li><li class="item" style="font-family: &quot;Bell MT&quot;;">Bell MT</li>'
  + '<li class="item" style="font-family: &quot;Berlin Sans FB&quot;;">Berlin Sans FB</li>'
  + '<li class="item" style="font-family: &quot;Bernard MT&quot;;">Bernard MT</li>'
  + '<li class="item" style="font-family: &quot;BlackAdder ITC&quot;;">BlackAdder ITC</li>'
  + '</ul>'
  + '</div></div>'
  + '<div class="font-style"><p>字形(Y):</p><div class="notepad-com-list" style="width: 132px;">'
  + '<input class="editor" type="text">'
  + '<br>'
  + '<ul class="list  font-style-list">'
  + '<li class="item selected" style="font-weight: normal; font-style: normal;">常规</li>'
  + '<li class="item" style="font-weight: normal; font-style: italic;">斜体</li>'
  + '<li class="item" style="font-weight: bold; font-style: normal;">粗体</li>'
  + '<li class="item" style="font-weight: bold; font-style: italic;">粗斜体</li>'
  + '</ul>'
  + '</div></div>'
  + '<div class="font-size"><p>大小(S):</p><div class="notepad-com-list" style="width: 64px;">'
  + '<input class="editor" type="text"><br>'
  + '<ul class="list font-size-list">'
  + '<li class="item">8</li>'
  + '<li class="item">9</li>'
  + '<li class="item">10</li>'
  + '<li class="item">11</li>'
  + '<li class="item">12</li>'
  + '<li class="item">14</li>'
  + '<li class="item selected">16</li>'
  + '<li class="item">18</li>'
  + '<li class="item">20</li>'
  + '<li class="item">22</li>'
  + '<li class="item">24</li>'
  + '<li class="item">26</li>'
  + '<li class="item">28</li>'
  + '<li class="item">36</li>'
  + '<li class="item">48</li>'
  + '<li class="item">72</li>'
  + '</ul>'
  + '</div></div>'
  + '<fieldset class="sample">'
  + '<legend>示例</legend>'
  + '<p class="sample-txt" style="font-family: Arial; font-size: 16pt; font-weight: normal; font-style: normal;">AaBbYyZz</p>'
  + '</fieldset>'
  + '<div class="script">'
  + '<label>'
  + '脚本(R):<br>'
  + '<select>'
    + '<option value="西欧语言">西欧语言</option>'
    + '<option value="中文 GB2312">中文 GB2312</option>'
  + '</select>'
  + '</label>'
  + '</div>'
  + '<input class="btn-ok btn" type="button" value="确定">'
  + '<input class="btn-cancel btn" type="button" value="取消"></div>'
  + '</div>'
  + '</div>'
}
